﻿@page "/scheduler/cell-template"

@using Syncfusion.Blazor.Schedule
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo illustrates how to customize the background of the specific date cells by adding images and custom text to it by using the cell template option.</p>
</SampleDescription>
<ActionDescription>
    <p> In this demo, the <code>CellTemplate</code> option which accepts the template string is used to customize the cell background with specific images and appropriate text on the given date values. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleTemplates>
                <CellTemplate>
                    <div class="templatewrap">
                        @{
                            @if ((int)(context as TemplateContext).Date.Month == 11 && (int)(context as TemplateContext).Date.Day == 23)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/thanksgiving-day.svg")" /><div class="caption">Thanksgiving day</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 9)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/get-together.svg")" /><div class="caption">Party time</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 13)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/get-together.svg")" /><div class="caption">Party time</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 22)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/birthday.svg")" /><div class="caption">Happy birthday</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 24)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/christmas-eve.svg")" /><div class="caption">Christmas Eve</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 12 && (int)(context as TemplateContext).Date.Day == 25)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/christmas.svg")" /><div class="caption">Christmas day</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 1 && (int)(context as TemplateContext).Date.Day == 1)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/newyear.svg")" /><div class="caption">New Year"s Day</div>
                            }
                            @if ((int)(context as TemplateContext).Date.Month == 1 && (int)(context as TemplateContext).Date.Day == 14)
                            {
                                <img src="@UriHelper.ToAbsoluteUri($"images/scheduler/get-together.svg")" /><div class="caption">Get together</div>
                            }
                        }
                    </div>
                </CellTemplate>
            </ScheduleTemplates>
            <ScheduleViews>
                <ScheduleView Option="View.Month"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>
<style>
    .e-schedule .e-month-view .e-work-cells {
        position: relative;
    }

    .e-schedule .templatewrap {
        text-align: center;
        position: absolute;
        width: 100%;
    }

        .e-schedule .templatewrap img {
            width: 25px;
            height: 25px;
        }

    .e-schedule .caption {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
</style>
@code{
    private DateTime CurrentDate = new DateTime(2019, 12, 15);
}